<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div style="display: none">
        <input id="gt" type="text" th:value="${gt}">
        <input id="challenge" type="text" th:value="${challenge}">
        <input id="key" type="text" th:value="${key}">
    </div>



    <div>
        <p th:text="${result}"></p>
        <label>验证：</label>
        <div id="captcha">
            <div id="text">
                请先生成
            </div>
            <div id="wait" class="show">
                <div class="loading">
                    <div class="loading-dot"></div>
                    <div class="loading-dot"></div>
                    <div class="loading-dot"></div>
                    <div class="loading-dot"></div>
                </div>
            </div>
        </div>
    </div>
    <br>

    <div id="btn-gen" class="btn">验证</div>

    <br><br>

    <div>
        <label for="account">账号: </label>
        <input class="inp" id="account" type="text">
    </div>
    <br>

    <div>
        <label for="password">密码: </label>
        <input class="inp" id="password" type="text">
    </div>
    <br>
    <div id="btn-r" class="btn">登录</div>


    <script src="js/jquery.js"></script>
    <script src="js/gt.js"></script>
    <script src="https://cdn.bootcss.com/jsencrypt/3.0.0-beta.1/jsencrypt.js"></script>
    <script>


        var publicKey;
        var hash;
        function RSA(password) {

            $.ajax({

                type: "post",

                url: "/RSA",

                cache:false,

                async:false,

                dataType: "json",

                success: function(json){
                    publicKey = json.key;
                    hash = json.hash;
                }

            });


            var PUBLIC_KEY = publicKey;
            var encrypt = new JSEncrypt();
            encrypt.setPublicKey(PUBLIC_KEY);
            var encrypted = encrypt.encrypt(hash+password);
            console.log('加密前数据:%o', password);
            console.log('加密后数据:%o', encrypted);
            return encrypted;
        }

        function allsubmit(validate,seccode,account,password,key,challenge){


            var temp = document.createElement("form");
            temp.action = "/login";
            temp.method = "post";
            temp.style.display = "none";

            var opt = document.createElement("input");
            opt.name = "validate";
            opt.value = validate;
            //alert(opt.name+":"+opt.value);
            temp.appendChild(opt);

            var opt2 = document.createElement("input");
            opt2.name="seccode";
            opt2.value=seccode;
            temp.appendChild(opt2);

            var opt3 = document.createElement("input");
            opt3.name="account";
            opt3.value=account;
            temp.appendChild(opt3);

            var opt4 = document.createElement("input");
            opt4.name="password";
            var rsa_password = RSA(password);
            opt4.value=rsa_password;
            temp.appendChild(opt4);

            var opt5 = document.createElement("input");
            opt5.name="key";
            opt5.value=key;
            temp.appendChild(opt5);

            var opt6 = document.createElement("input");
            opt6.name="challenge";
            opt6.value=challenge;
            temp.appendChild(opt6);

            document.body.appendChild(temp);
            temp.submit();
        }
        var handler = function (captchaObj) {
            captchaObj.appendTo('#captcha');
            captchaObj.onReady(function () {
                $("#wait").hide();
                console.log(captchaObj)
            });
            $('#btn-r').click(function () {
                var result = captchaObj.getValidate();
                if (!result) {
                    return alert('请完成验证');
                }

                var validate = result.geetest_validate;
                var seccode = result.geetest_seccode;
                var account = $("#account").val()
                var password = $("#password").val()
                var key = $('#key')[0].value;
                var challenge = $('#challenge')[0].value;
                allsubmit(validate,seccode,account,password,key,challenge)
            });
            // 更多前端接口说明请参见：http://docs.geetest.com/install/client/web-front/
        };

        $('#btn-gen').click(function () {
            $('#text').hide();
            $('#wait').show();
            var gt = $('#gt')[0].value;
            var challenge = $('#challenge')[0].value;
            // 调用 initGeetest 进行初始化
            // 参数1：配置参数
            // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它调用相应的接口
            initGeetest({
                // 以下 4 个配置参数为必须，不能缺少
                gt: gt,
                challenge: challenge,
                offline: false, // 表示用户后台检测极验服务器是否宕机
                new_captcha: true, // 用于宕机时表示是新验证码的宕机

                product: "popup", // 产品形式，包括：float，popup
                width: "300px",
                https: true

                // 更多前端配置参数说明请参见：http://docs.geetest.com/install/client/web-front/
            }, handler);
        });
    </script>
</body>

</html>